import * as React from 'react';
import produce from 'immer';
import './index.less';
// import emptyPic from '../../static/image/emptyPic.png';
import ComponentTree from '../componentTree';

const { useEffect, useRef, useState } = React;

// todo: 拖拽过程中鼠标样式问题  拖拽快照偶尔会出现

interface LayoutLeftState {
    clientHeight: number;
    upHeight?: number;
    downHeight: number;
    startClientY?: number;
    dy: number;  // 拖拽目标距离顶部与鼠标位置的偏差
}

const minDownHeight = 50;

export default function LayoutLeft() {
    const layoutLeftRef = useRef<HTMLDivElement | null>(null);
    const downRef = useRef<HTMLDivElement | null>(null);
    const [layoutData, setLayoutData] = useState<LayoutLeftState>({
        dy: 0,
        clientHeight: 0,
        downHeight: 200,
    });

    const onDragStart = (e) => {
        // var img = new Image();
        // img.src = emptyPic;
        // e.dataTransfer.setDragImage(img, 1, 1);
        const nextState = produce(layoutData, (draft) => {
            draft.startClientY = e.nativeEvent.clientY;
            if (downRef.current) {
                draft.dy = downRef.current.offsetTop - e.nativeEvent.clientY;
            }
            // console.log('offsetTop - startClientY = ', downRef.current.offsetTop, '-', draft.startClientY, '=', draft.dy);
        });
        setLayoutData(nextState);

    };

    const onDrag = (e) => {
        // const img = new Image();
        // img.src = emptyPic;
        // e.dataTransfer.setDragImage(img, 1, 1);
        // e.preventDefault();
        if (e.nativeEvent.clientY === 0) {return;} // 剔除异常数据
        const nextState = produce(layoutData, (draft) => {
            const upHeight = e.nativeEvent.clientY - 40 + layoutData.dy;
            const downHeight = layoutData.clientHeight - upHeight;
            if (downHeight >= minDownHeight) {
                draft.upHeight = upHeight;
                draft.downHeight = downHeight;
            }
        });
        setLayoutData(nextState);
    };

    useEffect(() => {
        const initLayout = () => {
            const nextState = produce(layoutData, (draft) => {
                draft.clientHeight = layoutLeftRef.current?.clientHeight || 0;
                // draft.downHeight最大值不能超过clientHeight容器高度
                if (downRef.current) {
                    draft.downHeight = draft.clientHeight > downRef.current.clientHeight ? downRef.current.clientHeight : draft.clientHeight;
                }
                draft.upHeight = draft.clientHeight - draft.downHeight;
            });
            setLayoutData(nextState);
        };
        window.onresize = initLayout;
        initLayout();

        return () => { window.onresize = null;};
    }, []);

    return <div className='layout-left' ref={layoutLeftRef}>
        <div className="layout-left-up" style={{height: layoutData.upHeight}}>

        </div>
        <div className="layout-left-down" ref={downRef} style={{height: layoutData.downHeight}}>
            <div><div className='row-resize' draggable="true" onDragStart={onDragStart} onDrag={onDrag}></div>
            </div>
            <div className='down-container'>
                <ComponentTree />
            </div>
        </div>
    </div>;
}
